import React,{ Component } from "react";
import {View, Text, StyleSheet, TouchableHighlight, Image, TouchableOpacity} from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

export default class ArticleList extends Component {
    constructor(props){
        super(props);
        this.state = {
            page: 1,
            dataValue: [],
            refreshstate: RefreshState.Idle
        };
    }
    static navigationOptions = (({navigation})=>{
        return {
            title:navigation.getParam("title"),
            headerStyle:{
                backgroundColor:'#d04542',
                height:50,
            },
            headerTintColor:'white',
        }
    });
    componentDidMount() {
        this.HeaderRefresh();
    }
    HeaderRefresh = () => {  //上拉刷新
        this.setState({
            page: 1,
            refreshstate: RefreshState.HeaderRefreshing
        });
        fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=share&limit=10`)
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    dataValue: responseJson.data,
                    refreshstate: RefreshState.Idle,
                    page: this.state.page + 1
                });
            })
            .catch(error => {
                this.setState({
                    refreshstate: RefreshState.Failure
                });
            });
    };
    FooterRefresh = () => {   //下拉加载
        this.setState({
            refreshstate: RefreshState.FooterRefreshing
        });
        fetch(
            `https://cnodejs.org/api/v1/topics?page=${
                this.state.page
                }&tab=share&limit=10`
        )
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    dataValue: [...this.state.dataValue, ...responseJson.data],
                    refreshstate: RefreshState.Idle,
                    page: this.state.page + 1
                });
            })
            .catch(error => {
                this.setState({
                    refreshstate: RefreshState.Failure
                });
            });
    };
    render(){
       return (
           <View style={ styles.conatiner }>
               <RefreshListView
                   style={{ flex: 1,color:'red' }}
                   data={this.state.dataValue}
                   renderItem={({ item }) => (
                       <TouchableOpacity onPress={()=>{
                           this.props.navigation.push("Textdetails",{ id:'123' });
                       }}>
                       <View style={ styles.articleList }>
                           <View style={{ flex:1  }}>
                               <Text
                                   ellipsizeMode="tail"
                                   numberOfLines={ 1 }
                               >
                                   { item.title }
                               </Text>
                               <Text style={{ color:'#b6b6b6',marginTop: 5 }}>
                                   2018-12-4
                               </Text>
                           </View>
                           <Image source={ require("../image/rightIcon.png") }  style={{ width:10,height:10 }} />
                       </View>
                       </TouchableOpacity>
                   )}
                   refreshState={this.state.refreshstate}
                   onFooterRefresh={this.FooterRefresh}
                   onHeaderRefresh={this.HeaderRefresh}
               />
           </View>
       )
    }
}

const styles = StyleSheet.create({
    conatiner:{
        flex:1,
    },
    articleList:{
        flex:1,
        paddingTop: 20,
        paddingBottom:10,
        paddingLeft:10,
        paddingRight:10,
        // borderTopWidth: 1,
        borderColor: "#ccc",
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        borderBottomWidth: 1,
    },
});